import React from "react";

import {Group, Text} from "@mantine/core";
import {WideIpdNavItem} from "./WideIpdNavItem";
import {WideIpdToolItem} from "./WideIpdToolItem";
import classes from "./WideIpdSideMenu.module.css";

// nav的接口
interface SideMenuNavProps {
  link: string;
  label: string;
  icon: React.FC<any>;
  requireAdmin?: boolean; // 添加一个标记，是否需要管理员权限
}

// tools的接口
interface ToolImageProps {
  alt: string;
  src: string;
}

interface SideMenuToolProps {
  link: string;
  label: string;
  image: ToolImageProps;
}

// 总接口
interface WideIpdSideMenuProps {
  menuTop: SideMenuNavProps[];
  menuTools: SideMenuToolProps[];
  menuBottom: SideMenuNavProps[];
}

export const WideIpdSideMenu = ({menuTop, menuTools, menuBottom}: WideIpdSideMenuProps) => {
  return (
    <nav className={classes.navbar}>
      <div className={classes.navHeader}>
        {menuTop.map((item) => (
          <div key={item.link}>
            <WideIpdNavItem nav={item.link} label={item.label} icon={item.icon} />
          </div>
        ))}
      </div>

      <div className={classes.navMiddle}>
        <Text size="xs" fw={500} c="dimmed" py="xs" className={classes.text}>
          承载网 :: 数智化工具集
        </Text>

        {menuTools.map((item) => (
          <div key={item.link}>
            <WideIpdToolItem link={item.link} label={item.label} img={item.image} />
          </div>
        ))}
      </div>
      <div className={classes.navFooter}>
        {menuBottom.map((item) => (
          <div key={item.link}>
            <WideIpdNavItem
              nav={item.link}
              label={item.label}
              icon={item.icon}
              requireAdmin={item.requireAdmin} // 传递是否需要管理员权限的标志
            />
          </div>
        ))}
      </div>
    </nav>
  );
};
